body div {
    user-select: initial;
}

.iframe-container {
    overflow: hidden;
    // aspect ration of the video (for 16:9 it is 9/16= 0.5625)
    padding-top: 56.25%;
    position: relative;
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/*
    TODO: It's workaround, and it should be removed. It seems that there is no option to disable title for a custom
    containers: https://v1.vuepress.vuejs.org/guide/markdown.html#custom-containers
 */
.custom-block-title {
    display: none;
}

/*
    TODO: It's workaround, and it should be removed. It seems that there is no option to disable title for a custom
    containers: https://v1.vuepress.vuejs.org/guide/markdown.html#custom-containers
 */
.custom-block.tip {
    border-color: #2456f2;
}

/* Larger bottom gap of H1, H2, H3 */
h1 {
    margin-bottom: 3rem!important;
}

h2 {
    margin-bottom: 2rem!important;
    font-size: 1.55rem;
}

h3 {
    margin-bottom: 1rem!important;
}

.page {
    ul, ol {
        padding-left: 2.2em;
    }
    ul {
        list-style-type: square;
    }
}

a {
    color: #3d84ff;
}

.sidebar {
    background-color: #fbfbfb;

    a.sidebar-link.active, a.sidebar-link:hover {
        color: #3d84ff;
    }

    .sidebar-sub-headers a.sidebar-link {
        color: #4d6379
    }
}

table {
    width: 100%;
    display: table;

    tr {
        border-top: none;
    }

    th, td {
        border: none;
        border-bottom: 1px solid #dfe2e5;
        line-height: 1.7;
        text-align: left;
    }
}

.example-controls {
    display: flex
    flex-wrap: wrap
    gap: 8px
    background: $editorColor
    border-radius: $radius
    padding: 10px
    margin 0

    .hidden {
        display: none
    }

    button {
        border: 1px solid $borderColor
        border-radius: $radius
        padding: 12px 20px 11px 17px !important
        display: flex
        align-items: center
        gap: 8px
        transition: background 0.3s ease, box-shadow 0.3s ease
        cursor: pointer
        background: white
        font-size: 14px

        &:hover {
            background: #f3f3f3
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
        }

        i, svg {
            opacity: .7
        }

        svg {
            path {
                fill: black
            }
        }

        &:disabled {
            i {
                opacity: 0.3 !important
            }
        }

        @media (hover: hover) {
            &:hover {
                i, svg {
                    opacity 1
                }
            }
        }
    }
}
